import { render } from 'react-dom'

const map: any = new Map()

/**
 * @description 消息提示
 * @param message 通知提醒标题，必选
 * @param description 通知提醒内容，必选
 * @param placement 弹出位置可选 【top | topRight | bottomRigth】
 * @param duration 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭
 * @function onClick 点击通知时触发的回调函数
 */
const Notification = {
    open: (argv: any) => {
        // 内置默认值
        const def: any = {
            message: argv.message,
            description: argv.description,
            placement: argv.placement || 'bottomRigth',
            duration: argv.duration == null || argv.duration == 0 ? 5 : argv.duration,
            onClick: argv.onClick
        }

        let data = map.get(def.placement) || []
        data.push(def)
        map.set(def.placement, data)

        render(<Tpl data={map} />, initContainer())

        if (def.duration > 0) {
            def.timerId = setTimeout(() => {
                onClick(def, data.length - 1)
            }, def.duration * 1000)
        }
    }
}

const initContainer = () => {
    let rootDom = document.getElementById('root')
    if (!rootDom) {
        rootDom = document.createElement('div')
        rootDom.setAttribute('id', 'root')
        document.body.appendChild(rootDom)
    }
    let nDom = rootDom.querySelector('.ant-notification')
    if (nDom) {
        return nDom.parentElement
    } else {
        let childDom = document.createElement('div')
        rootDom.appendChild(childDom)
        return childDom
    }
}

const Tpl = ({ data }: any) => {
    const box = (data: any) => {
        let style: any
        for (let [key, value] of data) {
            switch (key) {
                case 'topRight':
                    style = { right: '0px', top: '24px', bottom: 'auto' }
                    break
                case 'top':
                    style = { right: 'auto', top: '24px', bottom: 'auto', left: '50%', transform: 'translateX(-50%)' }
                    break
                case 'bottomRight':
                    style = { right: '0', top: 'auto', bottom: '24px' }
                    break
                default:
                    style = { right: '0px', top: '24px', bottom: 'auto' }
            }
            return (
                <div className='ant-notification' style={style}>
                    {value.map((item: any, index: number) => (
                        <div className='ant-notification-notice ant-notification-notice-closable'>
                            <div className='ant-notification-notice-content'>
                                <div className='' role='alert'>
                                    <div className='ant-notification-notice-message'>{item.message}</div>
                                    <div className='ant-notification-notice-description'>{item.description}</div>
                                </div>
                            </div>
                            <a className='ant-notification-notice-close' onClick={(e: any) => onClick(item, index)}>
                                <span className='ant-notification-notice-close-x'></span>
                            </a>
                        </div>
                    ))}
                </div>
            )
        }
    }
    return <div>{box(data)}</div>
}

const onClick = (e: any, index: number) => {
    let data = map.get(e.placement)
    if (data) {
        clearTimeout(e.timerId)
        if (data.length <= 1) {
            map.delete(e.placement)
        } else {
            map.set(e.placement, data.splice(index, 1))
        }
        render(<Tpl data={map} />, initContainer())
        if (typeof e.onClick == 'function') e.onClick(e)
    }
}

export default Notification
